<template>
  <div class="border-line card">
    <header-title title="保障人员分析" @fullScreen="handleFullScreen"></header-title>
    <div class="card-content">
      <echarts-view ref="echarts" :options="option" height="300px"></echarts-view>
      <echarts-view ref="echarts1" :options="option1" height="300px"></echarts-view>
      <echarts-view ref="echarts2" :options="option2" height="300px"></echarts-view>
    </div>
  </div>
</template>

<script>
import headerTitle from './headerTitle.vue'
import { echartsView } from '@/components'
import { getProportionTypes } from '@/api/analysis'
export default {
  props: {
    areaID: {
      type: Number,
      default: 0
    }
  },
  components: {
    headerTitle,
    echartsView
  },
  data () {
    return {
      option: {},
      option1: {},
      option2: {}
    }
  },
  mounted () {
    this.fetchData()
  },
  watch: {
    areaID: function (newVal, oldVal) {
      this.fetchData()
    }
  },
  methods: {
    fetchData () {
      const lB = getProportionTypes({ RegionNo: this.areaID, mode: 'RYLB' })
      const HJ = getProportionTypes({ RegionNo: this.areaID, mode: 'HJ' })
      const BZFS = getProportionTypes({ RegionNo: this.areaID, mode: 'BZFS' })
      Promise.all([lB, HJ, BZFS]).then(res => {
        this.option = {
          color: ['rgba(31, 164, 248, 1)', 'rgba(255, 228, 0, 1)', 'rgba(249, 90, 0, 1)', 'rgba(27, 199, 139, 1)'],
          tooltip: {
            trigger: 'item',
            confine: true
          },
          title: [
            {
              text: '人员类别',
              left: '25%',
              top: '5%',
              textAlign: 'center',
              textStyle: {
                fontWeight: 'normal',
                color: '#ffffff'
              }
            }
          ],
          series: [
            {
              name: '人员类别',
              type: 'pie',
              radius: ['45%', '60%'],
              avoidLabelOverlap: false,
              center: ['30%', '50%'],
              label: {
                show: true,
                position: 'outside',
                color: '#ffffff'
              },
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              },
              labelLine: {
                show: true
              },
              data: res[0]
            }
          ]
        }
        this.option1 = {
          color: ['rgba(31, 164, 248, 1)', 'rgba(255, 228, 0, 1)', 'rgba(249, 90, 0, 1)', 'rgba(27, 199, 139, 1)'],
          tooltip: {
            trigger: 'item',
            confine: true
          },
          title: [
            {
              text: '户籍',
              left: '46%',
              top: '5%',
              textAlign: 'center',
              textStyle: {
                fontWeight: 'normal',
                color: '#ffffff'
              }
            }
          ],
          series: [
            {
              name: '户籍',
              type: 'pie',
              radius: ['45%', '60%'],
              avoidLabelOverlap: false,
              center: ['50%', '50%'],
              label: {
                show: true,
                position: 'outside',
                color: '#ffffff'
              },
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              },
              labelLine: {
                show: true
              },
              data: res[1]
            }
          ]
        }
        this.option2 = {
          color: ['rgba(31, 164, 248, 1)', 'rgba(255, 228, 0, 1)', 'rgba(249, 90, 0, 1)', 'rgba(27, 199, 139, 1)'],
          tooltip: {
            trigger: 'item',
            confine: true
          },
          title: [
            {
              text: '保障类别',
              left: '60%',
              top: '5%',
              textAlign: 'center',
              textStyle: {
                fontWeight: 'normal',
                color: '#ffffff'
              }
            }
          ],
          series: [
            {
              name: '保障类别',
              type: 'pie',
              radius: ['45%', '60%'],
              avoidLabelOverlap: false,
              center: ['65%', '50%'],
              label: {
                show: true,
                position: 'outside',
                color: '#ffffff'
              },
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              },
              labelLine: {
                show: true
              },
              data: res[2]
            }
          ]
        }
      })
    },
    handleFullScreen () {
      this.$emit('fullScreen')
    }
  }
}
</script>
<style lang="less" scoped>
  .card {
    height: 320px;
    &-content {
      display: flex;
      margin-top: 20px;
    }
  }
</style>
